<template>
  <div>
    <!-- 顶部导航栏 -->
    <van-sticky>
      <van-row type="flex" justify="center">
        <van-col span="24" class="s">
          <van-nav-bar @click-left="onClickLeft" placeholder>
            <template #left>
              <div class="left_arrow">
                <van-icon name="arrow-left" size="20" />
              </div>
            </template>
          </van-nav-bar>
        </van-col>
      </van-row>
    </van-sticky>
    <!-- 中间商品详细详细 -->
    <van-row type="flex" justify="center">
      <van-col span="24" class="deep">
        <!-- 图片 -->
        <div class="img">
          <van-image show-loading :src="imgUrl" />
        </div>
      </van-col>
    </van-row>

    <van-row type="flex" justify="center" class="body">
      <!-- 价格 -->
      <van-col span="23">
        <div class="for_price">
          <div class="logo">{{ logo }}</div>
          {{ price }}
        </div>
      </van-col>
      <!-- 文字 -->
      <van-col span="21" class="font_deep">
        <div class="title">{{ title | ellipsis }}</div>
      </van-col>
      <!-- 收藏 -->
      <van-col span="3" class="font_deep">
        <van-icon
          name="like-o"
          size="25"
          style="margin-top: 12px"
          @click="AddLikeProducts(id)"
          v-if="flag1"
        >
          <div style="font-size: 12px; font-weight: 600">收藏</div>
        </van-icon>
        <van-icon
          name="like-o"
          size="25"
          style="margin-top: 12px"
          @click="AddLikeProducts(id)"
          color="red"
          v-if="flag2"
        >
          <div style="font-size: 12px; font-weight: 600">已收藏</div>
        </van-icon>
      </van-col>
    </van-row>
    <!-- 优惠券 -->
    <van-row type="flex" justify="center">
      <van-col span="24" class="coupon_deep">
        <div class="coupon">
          <van-cell title="优惠" @click="showList = true">
            <template #right-icon>
              <van-icon name="ellipsis" size="30px" />
            </template>
          </van-cell>
          <van-popup
            v-model="showList"
            round
            position="bottom"
            style="height: 60%; padding-top: 4px"
          >
            <van-coupon-list @change="onChange" />
          </van-popup>
        </div>
      </van-col>
    </van-row>
    <!-- 选择规格与收货地址 -->
    <van-row type="flex" justify="center">
      <van-col span="24">
        <div class="address_deep">
          <!-- 已选 -->
          <!-- 弹出地址单元格 -->
          <van-cell-group>
            <van-cell @click="showPopup">
              <div class="van-cell__title">
                <span class="custom-title">已选</span>
              </div>
              <template #right-icon>
                <van-icon name="ellipsis" size="30px" />
              </template>
            </van-cell>

            <van-cell @click="placeList = true" class="address">
              <div class="van-cell__title">
                <span class="custom-title">送至</span>
                <span class="addrInfo">{{ this.addrInfo }}</span>
              </div>
              <template #right-icon>
                <van-icon name="ellipsis" size="30px" />
              </template>
            </van-cell>
          </van-cell-group>
          <!-- 弹出地址列表 -->
          <van-popup
            v-model="placeList"
            round
            position="bottom"
            style="height: 40%; padding-top: 4px"
          >
            <van-area
              title="配送至"
              :area-list="areaList"
              @confirm="confirm"
              @cancel="bindCancel"
            />
          </van-popup>
        </div>
      </van-col>
    </van-row>

    <!-- 底部购买等等 -->
    <van-goods-action class="deep">
      <van-goods-action-icon icon="shop-o" text="店铺" color="red" />
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        to="/shopping"
        :badge="count"
      />
      <van-goods-action-button
        type="danger"
        text="加入购物车"
        @click="goShopping(id)"
      />
      <van-goods-action-button
        type="warning"
        text="立即购买"
        @click="goBuy(id)"
      />
    </van-goods-action>
  </div>
</template>

<script>
import Tabbar from "../components/Tabbar.vue";
import { areaList } from "@vant/area-data";

export default {
  name: "Details",
  components: {
    Tabbar,
  },
  filters: {
    ellipsis(value) {
      if (!value) return "";
      return value;
    },
  },
  data() {
    return {
      count: 0,
      numList: [],
      flag1: true,
      flag2: false,
      like: false,
      showList: false,
      chosenCoupon: -1,
      areaList,
      addrInfo: "",
      code: 0,
      valueArea: "",
      dataList: [],
      columnsNum: [],
      placeList: false,
      id: this.$route.params.id,
      value: "",
      imgUrl: "",
      title: "",
      price: "",
      logo: "",
      show: false,
      dataList: [],
    };
  },

  mounted() {
    this.getAllBuyList(this.id);
    this.getCount();
  },

  methods: {
    sleep(d) {
      return new Promise((resolve) => setTimeout(resolve, d));
    },
    // getContainer() {
    //   return document.querySelector("#a");
    // },
    onClickLeft() {
      this.$router.push("/");
    },
    showPopup() {
      this.show = true;
    },
    getContainer() {
      return document.querySelector(".deep");
    },
    //从后台通过动态路由获取该id值得所有商品内容
    getAllBuyList(id) {
      this.$axios
        .get("/buyList/" + id)
        .then((res) => {
          // console.log(res);
          if (res.statusText == "OK") {
            this.imgUrl = res.data.imgUrl;
            this.title = res.data.title;
            this.price = res.data.price;
            this.logo = res.data.logo;
            // console.log(res.data);
          } else {
            console.log("出错了！");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async getCount() {
      let count;
      this.$axios.get("/buyList?isInCar=true").then((res) => {
        this.dataList = res.data;
        let a = this.dataList.map((item) => {
          return item.num;
        });
        count = parseInt(a.length);
      });
      await this.sleep(100);
      return (this.count = count);
    },
    confirm(value) {
      this.placeList = false;
      this.columnsNum = value;
      this.addrInfo = value[0].name + "-" + value[1].name + "-" + value[2].name;
      this.columnsNum = this.addrInfo;
    },
    bindCancel() {
      this.placeList = false;
    },
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    // change() {
    //   if (this.like === false) {
    //     this.flag2 = true;
    //     this.flag1 = false;
    //     this.like = true;
    //   } else {
    //     this.flag2 = false;
    //     this.flag1 = true;
    //     this.like = false;
    //   }
    // },
    async goShopping(id) {
      const data = {
        isInCar: true,
      };
      this.$axios
        .patch("/buyList/" + id, data)
        .then((res) => {
          if (res.statusText == "OK") {
            this.$toast("添加成功");
          } else {
            console.log("出错了！");
          }
        })
        .catch((err) => {
          console.log(err);
        });
      await this.sleep(80);
      window.location.reload();
    },
    // 点击收藏后台添加
    AddLikeProducts(id) {
      const data_like = {
        isInLike: true,
      };
      const data_notLike = {
        isInLike: false,
      };
      if (this.like === false) {
        this.flag2 = true;
        this.flag1 = false;
        this.like = true;
        this.$axios
          .patch("/buyList/" + id, data_like)
          .then((res) => {
            if (res.statusText == "OK") {
              this.$toast("添加成功");
            } else {
              console.log("出错了！");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.flag2 = false;
        this.flag1 = true;
        this.like = false;
        this.$axios
          .patch("/buyList/" + id, data_notLike)
          .then((res) => {
            if (res.statusText == "OK") {
              this.$toast("取消收藏");
            } else {
              console.log("出错了！");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    goBuy(id){
      this.$router.push('/buy/' + id)
    }
  },
};
</script>
<style scoped>
.van-nav-bar_arrow ::before {
  color: red;
}
#app > div > div > button {
  width: 10px;
}
.s /deep/ .van-nav-bar__content {
  background-color: #f6f6f6;
}
.deep /deep/ .img {
  height: 393px;
  width: 393px;
  margin: 0 auto;
}
.img /deep/ .van-image {
  height: 393px;
  width: 393px;
}
.font_deep /deep/ .title {
  font-weight: 600;
  padding: 13px;
}
.body {
  background-color: white;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.coupon_deep /deep/ .van-cell,
.address_deep /deep/ .van-cell,
.address_deep /deep/ .van-cell-group {
  margin-top: 10px;
  border-radius: 12px;
}
.coupon /deep/ .van-cell__title,
.address_deep /deep/ .van-cell__title {
  font-weight: 600;
}
.address_deep /deep/ .addrInfo {
  display: inline-block;
  font-size: 12px;
  margin-left: 15px;
}
.s /deep/ .van-nav-bar__content {
  display: inline;
  top: 20px;
  right: 205px;
}
.s /deep/ .left_arrow {
  height: 30px;
  width: 30px;
  margin-top: 10px;
  background-color: #666666;
  border-radius: 100%;
}
.s /deep/ .van-icon {
  color: #e2e2e2;
  margin-top: 6px;
}
.for_price {
  color: red;
  font-weight: 700;
  font-size: 30px;
  margin-left: 5px;
  margin-top: 10px;
}
.logo {
  display: inline-block;
  font-size: 14px;
}
.address /deep/ .van-cell__title {
  display: inline-block;
  margin-bottom: 20px;
}
</style>